import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { SearchBar } from 'antd-mobile'
import { LeftOutline, RightOutline } from 'antd-mobile-icons'
import dataService from '../../services/dataService'

const AllCategories = () => {
  const navigate = useNavigate()
  const [searchValue, setSearchValue] = useState('')

  // 获取分类数据
  const allTrainings = dataService.getAllTrainings()
  const categoryStats = dataService.getCategories().map(category => {
    const count = allTrainings.filter(t => t.category === category).length
    return { name: category, count }
  })

  const categoryIcons: Record<string, string> = {
    '力量训练': '🏋️',
    '瑜伽': '🧘',
    '跳绳': '🪀',
    '拳击': '🥊',
    '跑步': '🏃',
    '塑形': '💃',
    '动感单车': '🚴'
  }

  const categoryColors: Record<string, string> = {
    '力量训练': '#FFF4E6',
    '瑜伽': '#E6F7FF',
    '跳绳': '#FFF1F0',
    '拳击': '#F6FFED',
    '跑步': '#F9F0FF',
    '塑形': '#FFF7E6',
    '动感单车': '#E6FFFB'
  }

  const handleCategoryClick = (category: string) => {
    navigate(`/shape?category=${encodeURIComponent(category)}`)
  }

  return (
    <div className="categories-page">
      {/* 头部 */}
      <div className="header">
        <div className="nav-header">
          <button className="back-btn" onClick={() => navigate(-1)}>
            <LeftOutline />
          </button>
          <div className="title">分类</div>
          <div style={{ width: 24 }} />
        </div>
        
        <div className="search-section">
          <SearchBar
            placeholder="这里输入人员容姓名"
            value={searchValue}
            onChange={setSearchValue}
            style={{ 
              '--background': '#f5f5f5',
              '--border-radius': '20px'
            }}
          />
        </div>
      </div>

      <div className="content">
        <div className="categories-list">
          {categoryStats.map((category) => (
            <div 
              key={category.name}
              className="category-item"
              style={{ backgroundColor: categoryColors[category.name] || '#f5f5f5' }}
              onClick={() => handleCategoryClick(category.name)}
            >
              <div className="category-icon">
                {categoryIcons[category.name] || '💪'}
              </div>
              <div className="category-info">
                <div className="category-name">{category.name}</div>
                <div className="category-count">{category.count} 项训练</div>
              </div>
              <RightOutline className="arrow-icon" />
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .categories-page {
          min-height: 100vh;
          background: #f8f9fa;
        }
        
        .header {
          background: white;
          padding: 16px 20px 20px;
        }
        
        .nav-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
        }
        
        .back-btn {
          background: none;
          border: none;
          font-size: 20px;
          color: #333;
          cursor: pointer;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .title {
          font-size: 18px;
          font-weight: 600;
          color: #333;
        }
        
        .search-section {
          margin-top: 8px;
        }
        
        .content {
          padding: 20px;
        }
        
        .categories-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        
        .category-item {
          background: white;
          border-radius: 16px;
          padding: 20px;
          display: flex;
          align-items: center;
          gap: 16px;
          cursor: pointer;
          transition: transform 0.2s;
          box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        
        .category-item:active {
          transform: scale(0.98);
        }
        
        .category-icon {
          width: 50px;
          height: 50px;
          border-radius: 12px;
          background: rgba(255,255,255,0.8);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
        }
        
        .category-info {
          flex: 1;
        }
        
        .category-name {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }
        
        .category-count {
          font-size: 14px;
          color: #666;
        }
        
        .arrow-icon {
          color: #999;
          font-size: 16px;
        }
      `}</style>
    </div>
  )
}

export default AllCategories